<template lang="html">
    <div class="user-ctrl-page normal-table-page">
        <Card :dis-hover="true">
            <p slot="title">
                <Icon type="person-stalker"></Icon> 用户管理
            </p>
            <div slot="extra">

                <Input v-model="searchKey" class="search-input" icon="search" placeholder="手机号、登录名或昵称" style="width: 300px" @keydown.native.enter="doSearch"></Input>
                <Button type="ghost" class="add-new-btn" v-if="searchKey" @click="clearSearch()">清空</Button>

                <Button type="ghost" class="add-new-btn" icon="plus" @click="showModal = true">新增</Button>
            </div>
            <!-- <transition name="fade">
                <div class="loading-cover" v-if="pageLoading">
                    <Spin fix size="large"></Spin>
                </div>
            </transition> -->
            <!-- <Table :columns="userColumns" ref="usersTable" stripe border  :data="tableData" ></Table> -->
            <can-edit-table ref="userTable" v-model="tableData" :loading="pageLoading" :columns-list="userColumns" :highlight-row="true" @on-delete="deleteUser"></can-edit-table>

            <div class="page-ctrl"  v-if="pageCount">
                <Page :total="pageCount" :current="pageNum" show-total show-elevator @on-change="changePage" :page-size="20">
                    <Button type="ghost" icon="android-print" class="export-btn" @click="export2Excel" :disabled="!tableData.length">
                        <a id="hrefToExportTable" style="postion: absolute;left: -10px;top: -10px;width: 0px;height: 0px;"></a>
                    导出本页</Button>
                    <span style="vertical-align: middle;">
                        共{{pageCount}}条数据
                    </span>
                </Page>
            </div>
        </Card>
        <Modal :mask-closable="false" v-model="showModal" title="添加用户" :loading="modalLoading" @on-ok="submitAddUser()">
            <Form :model="addUserModalForm" ref="addUserModalFormForm" :rules="addUserModalFormRules" >
                <FormItem label="昵称" prop="nickname">
                    <Input v-model="addUserModalForm.nickname" placeholder="请输入用户昵称"></Input>
                </FormItem>
                <FormItem label="手机号" prop="mobilenum">
                    <Input v-model="addUserModalForm.mobilenum" placeholder="请输入手机号（即登录名）"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model="addUserModalForm.password" type="password" placeholder="请输入密码（不填默认为手机号后六位）"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script src="./user-ctrl.js">

</script>

<style lang="scss" src="./user-ctrl.scss">
</style>
